// 图片处理相关功能封装
const ImageHandler = {
    // 初始化函数
    init: function() {
        this.setupEventListeners();
        this.createProgressModal();
    },

    // 设置事件监听器
    setupEventListeners: function() {
        const self = this;

        // 图片上传事件
        $('#question-image-upload').on('change', function(e) {
            self.handleImageUpload(e);
        });

        // 图片分析按钮点击事件
        $(function() {
            if ($('#question-image-analysis-btn').length) {
                console.log('图片分析按钮存在');
                $('#question-image-analysis-btn').on('click', function() {
                    self.handleImageAnalysis();
                });
            } else {
                console.log('图片分析按钮不存在');
            }
        });
    },

    // 创建进度条模态框
    createProgressModal: function() {
        // 添加进度条HTML
        $('body').append(`
            <!-- 弹出式进度条模态框 -->
            <div class="modal fade" id="image-analysis-progress" tabindex="-1" role="dialog" aria-labelledby="progressModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="progressModalLabel">图片分析中，请稍候...</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="progress" style="height: 20px;">
                                <div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <p id="progress-text" class="text-center mt-2 text-muted">正在处理，请不要关闭此窗口...</p>
                        </div>
                    </div>
                </div>
            </div>
        `);

        // 初始化隐藏模态框并禁止关闭
        $('#image-analysis-progress').modal('hide');
        $('#image-analysis-progress').modal({backdrop: 'static', keyboard: false});
    },

    // 处理图片上传
    handleImageUpload: function(e) {
        const file = e.target.files[0];
        if (!file) return;

        const formData = new FormData();
        formData.append('upload', file);

        $.ajax({
            url: '/core/upload-image/',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRFToken': this.getCookie('csrftoken')
            },
            success: function(data) {
                if (data.uploaded && data.url) {
                    $('#question-image-url').val(data.url);
                    alert('图片上传成功');
                    // 可以在这里添加图片预览逻辑
                } else {
                    alert('图片上传失败: ' + (data.error ? data.error.message : '未知错误'));
                }
            },
            error: function(xhr, status, error) {
                console.error('图片上传失败:', error);
                alert('图片上传失败，请重试。');
            }
        });
    },

    // 处理图片分析
    handleImageAnalysis: function() {
        console.log('图片分析按钮被点击');
        // alert('图片分析处理'); // 可以移除这个提示，避免干扰用户

        const imageUrl = $('#question-image-url').val();
        if (!imageUrl) {
            alert('请先上传图片');
            return;
        }

        const onlyQuestion = $('#answer-image-check').is(':checked');
        const self = this;

        // 显示进度条模态框
        $('#image-analysis-progress').modal('show');
        let progress = 0;
        const progressInterval = setInterval(() => {
            progress += 1;
            if (progress > 95) progress = 95; // 留5%在最后完成时更新
            self.updateProgress(progress);
        }, 6000); // 每6秒更新1%，大约1分钟完成

        // 向服务器发送请求处理图片
        $.ajax({
            url: '/core/analyze-image/',
            type: 'POST',
            data: {
                image_url: imageUrl,
                only_question: onlyQuestion
            },
            headers: {
                'X-CSRFToken': this.getCookie('csrftoken')
            },
            success: function(data) {
                alert(data.content);
                clearInterval(progressInterval);
                self.updateProgress(100);
                setTimeout(() => {
                    $('#image-analysis-progress').modal('hide');
                    if (data.success) {
                            CKEDITOR.instances.question.setData(data.content);
                        

                            // // 如果only_question为false，更新答案
                            // if (!onlyQuestion && data.answer) {
                            //     console.log('更新答案描述:', data.answer);
                            //     $('#answer').val(data.answer);
                            //     // 触发CKEditor内容更新
                            //     if (CKEDITOR.instances.answer) {
                            //         CKEDITOR.instances.answer.setData(data.answer);
                            //         console.log('CKEditor answer已更新');
                            //     } else {
                            //         console.error('CKEditor answer实例不存在');
                            //     }
                            //     // 更新预览
                            //     $('#preview-answer').html(data.answer);
                            // } else {
                            //     if (onlyQuestion) {
                            //         console.log('onlyQuestion为true，不更新答案');
                            //     } else if (!data.answer) {
                            //         console.warn('data.answer不存在');
                            //     }
                            // }

                            alert('图片分析成功');
                        } else {
                            alert('图片分析失败: ' + (data.error ? data.error : '未知错误'));
                        }
                }, 1000);
            },
            error: function(xhr, status, error) {
                clearInterval(progressInterval);
                $('#image-analysis-progress').modal('hide');
                console.error('图片分析失败:', error);
                alert('图片分析失败，请重试。');
            }
        });
    },

    // 更新进度条
    updateProgress: function(percentage) {
        $('#progress-bar').css('width', percentage + '%').attr('aria-valuenow', percentage);
        if (percentage >= 100) {
            $('#progress-text').text('处理完成，正在加载结果...');
        }
    },

    // 获取CSRF Token
    getCookie: function(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};

// 当DOM加载完成后初始化图片处理器
$(document).ready(function() {
    ImageHandler.init();
});